import React from 'react'
import './index.less'
import CommonHeader from 'COMPONENT/CommonHeader';
import { List, Checkbox, Button } from 'antd-mobile';
import PropTypes from 'prop-types';
const AgreeItem = Checkbox.AgreeItem;

const CheckboxItem = Checkbox.CheckboxItem;

const itemData = [
    {key:'1',name:' 短信动态密码验证(手机尾号:2354)'},
    {key:'2',name:' 邮箱验证(邮箱地址:123456@qq.com)'},
]

class HmdMain extends React.Component { 
    static contextTypes = {
        router: PropTypes.object.isRequired
    }
    constructor(props){ 
        super(props);
        this.state={ 
            checkItem:'1',
            checked:'ture',
        }
    }
    btnClick=()=>{ 
        this.context.router.push({
			pathname: '/HmdMain/HmdMainAffirm'
        })
    }
    onChange=(key)=>{ 
        this.setState({ 
            checkItem:key,
        })
    }

    render() {
        
        return (
            <div className="hmd_tools">
           		<CommonHeader 
					name='请选择认证工具'					
					leftContentTitle="@back" 
					leftContent='返回'
				/>
				<div style={{height:'.9rem'}}></div>
                {itemData.map(item=>( 
                    <List className='hmd_tools_body'>
                        <CheckboxItem checked={item.key==this.state.checkItem?true:false} onChange={() => this.onChange(item.key)}>
                            {item.name}
                        </CheckboxItem>
                    </List>
                ))}
                <div className="tools_agree">
                    <AgreeItem  checked={this.state.checked} onChange={e => this.setState({checked:e.target.checked})}><div className="">以后优先使用该认证工具</div></AgreeItem>
                </div>
                {/*<div className="hmd_tools_btn">*/}
                    {/*<Button type="primary" className="form_btn" inline onClick={this.btnClick}>下一步</Button>*/}
                {/*</div>*/}
                <div className="btnGroup-one-fixed">
                    <Button type="primary" className="btnGroup-one-fixed-btn"
                            onClick={this.btnClick}>下一步</Button>
                </div>

            </div>
        );
    }
}
export default HmdMain;